<template>
	<view>
		<view class="ray-list__header fixed">
			<wuc-tab :tab-list="tabList" :tabCur.sync="nodeType" tab-class="tabs" select-class="tab-selected" textFlex @change="tabChange" class="tabContent"></wuc-tab>
		</view>

		<view v-if="nodeType === 0">
			<view class="warehousingToBeCon">
				<view class="nav">
					<view class="flex_between">
						<view class="nav_title"><view :class="{ activeT: isActive == 0 }" class="nav-item" @click="chenked(0)">已领取</view></view>
						<view class="nav_title"><view :class="{ activeT: isActive == 1 }" class="nav-item" @click="chenked(1)">已失效</view></view>
					</view>
				</view>

				<!-- nav-item -->
				<view class="nav_item" v-if="isActive == 0">
					<view class="reportType_body" v-for="(item, index) in list" :key="index">
						<view class="list_top">
							<view class="list_top_data">
								<image :src="item.ticketImgUrl" class="list_top_data_img"></image>
								<view class="list_top_desc">
									<view class="month_card">{{ item.ticketName }}</view>
									<view class="start_data">有效期截止至：{{ item.validityEndTime }}</view>
								</view>
								<button class="list_top_btn" @click="use(item.detailId)">立即使用</button>
							</view>
							<view @click="toggleFun(index)" class="list_explain">
								<text class="list_top_explain">使用说明</text>
								<view class="arrow"></view>
							</view>
						</view>
						<view class="reportType_btns" v-show="item.showContent">
							<view class="line"></view>
							<view class="btn" :class="{ active: active == index }" @click="fun(index)">
								<view class="box" v-html="item.ticketUsageRules"><!-- <text>{{item.ticketUsageRules}}</text> --></view>
							</view>
						</view>
					</view>
				</view>
				<view class="nav_item" v-if="isActive == 1">
					<view class="reportType_body" v-for="(item, index) in list" :key="index">
						<view class="list_top">
							<view class="list_top_data">
								<image :src="item.ticketImgUrl" class="list_top_data_img"></image>
								<view class="list_top_desc">
									<view class="month_card">{{ item.ticketName }}</view>
									<view class="start_data">有效期截止至：{{ item.validityEndTime }}</view>
								</view>
								<view style="width: 90rpx;height: 90rpx;">
									<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/old.png" style="width:100%;height:100%;"></image>
								</view>
							</view>
							<view class="list_explain" style="display: flex;justify-content: space-between;">
								<view class="delete" style="margin-left: 44rpx;" @click="deleteCoupon(item.detailId, index)">
									<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/delete.png"></image>
									<text>删除</text>
								</view>
								<!-- <view style="display: flex;align-items: center;">
									<text class="list_top_explain">使用说明</text>
									<uni-icons :type="arrow" size="20" style="font-size: 32rpx; color:#8A8C8D;"></uni-icons>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="prize_item" v-for="(item, index) in list" :key="index">
				<image :src="item.logoUrl" mode="aspectFill"></image>
				<view class="title">{{ item.title }}</view>
				<text class="btn" @click="prizeDetail(item)">立即使用</text>
			</view>
		</view>
		<mix-load-more :status="loading"></mix-load-more>
	</view>
</template>

<script>
import http, { envVersion } from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	components: { uniIcons, uniGrid, uniGridItem, mixLoadMore },
	data() {
		return {
			toggle: false,
			arrow: 'arrowdown',
			active: -1,
			isActive: 0,
			list: [],

			loading: 0,
			loadingType: 0,
			pageNum: 1,
			tabList: [
				{
					name: '我的卡券',
					status: 1
				},
				{
					name: '我的奖品',
					status: 2
				}
			],
			nodeType: 0
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.getList();
		}
	},
	methods: {
		chenked(type) {
			if (this.isActive === type) return false;
			this.isActive = type;
			this.loading = 1;
			this.list = [];
			this.pageNum = 1;
			this.getList();
		},
		deleteCoupon(id, index) {
			http('/api/sysTicketInfo/' + id, { data: {}, method: 'DELETE' }).then(
				result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
					this.list.splice(index, 1);
					// this.getList();
				},
				result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		use(detailId) {
			uni.navigateTo({
				url: '/personal/couponDetail?detailId=' + detailId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		toggleFun(index) {
			this.list[index].showContent = !this.list[index].showContent;
			if (this.toggle) {
				this.arrow = 'arrowup';
			} else {
				this.arrow = 'arrowdown';
			}
		},
		fun(index) {
			this.active = index;
		},
		tabChange(index) {
			this.loading = 1;
			this.nodeType = index;
			this.list = [];
			if (index === 0) {
				this.chenked(index);
			}
			this.getList();
		},
		getList() {
			this.loading = 1;
			if (this.nodeType === 1) {
				http('/api/duiba/pageList', {
					data: {
						pageSize: 10,
						pageNum: this.pageNum
					},
					method: 'POST'
				}).then(result => {
					if (result.code === 200) {
						const data = result.rows || [];
						this.list = this.list.concat(data);
						if (data.length == 10) {
							this.pageNum++;
							this.loading = 0;
						} else {
							this.loading = 2;
						}
						this.loading = this.list.length === 0 ? 3 : this.loading;
					} else {
						this.loading = 0;
					}
				});
			} else {
				http('/api/cusUserInfo/getTicketByCustomerId', {
					data: {
						isExpired: this.isActive,
						pageSize: 10,
						pageNum: this.pageNum
					},
					method: 'GET'
				}).then(
					result => {
						if (result.code === 200) {
							const data = result.rows || [];
							this.list = this.list.concat(data); //进行数据的累加
							if (data.length == 10) {
								this.pageNum++; //页数的++
								this.loading = 0;
							} else {
								this.loading = 2;
							}
							this.loading = this.list.length === 0 ? 3 : this.loading;
						} else {
							this.loading = 0;
						}
					},
					result => {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
					}
				);
			}
		},
		prizeDetail({ recordDetailUrl: url, sendStatus, sysPartnerInfo }) {
			if (sendStatus === 0) {
				url = url.replace(/^http:/, 'https:');
				http('/api/duiba/getNoLoginUrl/?redirect=' + url + '&credits=' + 0, { data: {}, method: 'GET' }).then(
					result => {
						// #ifdef H5
						location.href = result.data;
						// #endif
						// #ifdef MP-WEIXIN
						uni.navigateTo({
							url: 'webView?url=' + encodeURIComponent(result.data),
							animationType: 'pop-in',
							animationDuration: 200
						});
						//#endif
					},
					result => {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
					}
				);
			} else if (sendStatus === 2) {
				const { appId, applicationPagesPath: path, partnerType } = sysPartnerInfo;
				if (partnerType === '1') {
					wx.navigateToMiniProgram({ appId, path, envVersion, extraData: { uid: this.$store.state.userInfo.userId } });
				} else {
					this.toWebView(path);
				}
			} else {
				uni.showModal({
					title: '提示',
					content: '奖品发放中，稍等片刻...',
					showCancel: false,
					confirmText: '我知道了'
				});
			}
		},
		toWebView(url) {
			// #ifdef H5
			location.href = url;
			// #endif
			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: '../pages/home/web_view?url=' + encodeURIComponent(url),
				animationType: 'pop-in',
				animationDuration: 200
			});
			// #endif
		}
	}
};
</script>

<style lang="less" scoped>
.prize_item {
	height: 200rpx;
	// background: rgba(255, 182, 102, 0.6);
	background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/award.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 24rpx;
	padding: 0 46rpx;
	margin: 10rpx 10rpx;
	display: flex;
	align-items: center;
	image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
	}
	.title {
		margin-left: 24rpx;
		font-size: 26rpx;
		color: #66645d;
		flex: 1;
	}
	.btn {
		width: 130rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: #facc6b;
		border: none;
		color: #66645d;
		font-size: 24rpx;
		border-radius: 12rpx;
	}
}

.fixed {
	height: 80rpx;
	width: 100%;
	.tabContent {
		width: 100%;
		position: fixed;
		z-index: 10;
	}
}
.warehousingToBeCon {
	width: 100%;
	background-color: #f7f7f7;
	color: #66645d;
	font-size: 13px;
	.nav {
		position: fixed;
		width: 100%;
		z-index: 10;
		top: 76rpx;
		background-color: #f7f7f7;
		.flex_between {
			display: flex;
			justify-content: center;
			.nav_title {
				font-size: 26rpx;
				font-weight: 400;
				color: #8a8c8d;
				line-height: 37rpx;
				padding: 36rpx 78rpx 36rpx 78rpx;
				position: relative;
				.activeT {
					color: #66645d;
				}
				&::after {
					content: '';
					position: absolute;
					top: 44rpx;
					right: 0;
					width: 2rpx;
					height: 20rpx;
					transform: scaleX(0.5);
					background-color: #66645d;
				}
				&:last-child {
					&::after {
						width: 0;
						display: none;
					}
				}
			}
		}
	}
	.nav_item {
		padding-top: 90rpx;
		.reportType_body {
			margin: 0 16rpx;
			border-radius: 12rpx;
			.list_top {
				height: 200rpx;
				background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/bg.png) no-repeat 0 0rpx;
				background-size: 100% 100%;
				.list_top_data {
					display: flex;
					margin: 0 44rpx;
					height: 130rpx;
					padding-top: 15rpx;
					align-items: center;
					border-bottom: 1rpx dashed #c2c3c3;
					.list_top_data_img {
						flex-shrink: 0;
						border-radius: 50%;
					}
					image {
						width: 70rpx;
						height: 70rpx;
						margin-right: 24rpx;
					}
					.list_top_desc {
						flex-grow: 1;
						.month_card {
							font-size: 26rpx;
							line-height: 37rpx;
							color: #66645d;
							font-weight: 500;
						}
						.start_data {
							font-size: 24rpx;
							color: #8a8c8d;
							line-height: 33rpx;
							margin-top: 4rpx;
						}
					}
					.list_top_btn {
						padding: 13rpx 0;
						margin: 0;
						height: 50rpx;
						line-height: 1;
						width: 140rpx;
						text-align: center;
						background: #facc6b;
						font-size: 24rpx;
						border-radius: 12rpx;
						color: #66645d;
						// margin-top: 40rpx;
					}
				}
				.list_explain {
					text-align: right;
					padding-right: 44rpx;
					margin-top: 12rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.list_top_explain {
						width: 70%;
						margin-right: 24rpx;
						color: #8a8c8d;
						font-size: 24rpx;
					}
					.arrow {
						width: 24rpx;
						height: 12rpx;
						position: relative;
						&::before,
						&::after {
							content: '';
							position: absolute;
							left: 0;
							top: 4rpx;
							width: 15rpx;
							height: 4rpx;
							background-color: RGBA(102, 100, 93, 1);
							transform: rotate(30deg);
							border-radius: 2rpx;
						}
						&::after {
							left: unset;
							right: 0;
							transform: rotate(-30deg);
						}
					}
					.delete {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						image {
							width: 24rpx;
							height: 28rpx;
							margin-right: 8rpx;
							// padding-top: 8rpx;
						}
					}
				}
			}
			.reportType_btns {
				margin: 0 22rpx;
				background: #fff;
				border-radius: 0 0 12rpx 12rpx;
				margin-top: -32rpx;
				.btn {
					padding: 24rpx;
					font-size: 26rpx;
					color: #ccc;
					line-height: 30rpx;
					box-shadow: 0 0 12rpx 0 #ddd;
					position: relative;
					border-radius: 0 0 12rpx 12rpx;
				}
				.line {
					height: 20rpx;
					background: #f7f7f7;
					position: relative;
					z-index: 1;
				}
			}
		}
		.classTab {
		}
	}
}

.active {
	position: relative;
	color: #66645d;
}

// .active::after {
// 	content: '';
// 	position: absolute;
// 	width: 40rpx;
// 	height: 6rpx;
// 	border-radius: 8rpx;
// 	background-color: #66645d;
// 	left: 0px;
// 	right: 0px;
// 	bottom: 0px;
// 	margin: auto;
// }
</style>
